<template>
    <div class="app" >
      <h2 :class="$attrs.abc">姓名：{{ name }}</h2>
      <h2>年龄：{{age}}</h2>
      <h2>身高：{{height}}</h2>
    </div>
  </template>

  
  <script>
//   在开发中很常见的就是父子组件之间通信，比如父组件有一些数据，需要子组件来进行展示:口这个时候我们可以通过props来完成组件之间的通信
// 什么是Props呢?
// 口 Props是你可以在组件上注册一些自定义的attribute
// 口 父组件给这些attribute赋值，子组件通过attribute的名称获取到对应的值Props有两种常见的用法:
// 口方式一:字符串数组，数组中的字符串就是attribute的名称;
// 口方式二:对象类型，对象类型我们可以在指定attribute名称的同时，指定它需要传递的类型、是否是必须的、默认值等等，
    /* import { forMe } from "@/api/index";*/
    export default {
      //name 指定不重复即可
      name: "index",
      components: {
        //引入组件
      },
    //   inheritAttrs:false,
    //   1.props数组语法
    //   弊端：   1> 不能对类型进行验证
    //            2> 没有默认值
      props: ["name","age","height"],
    //   2.props对象语法
    props:{
        // type可以填什么
        /*
        String
        Number
        Boolean
        Array
        object  // default必须是一个函数
        Date
        Function
        Symbol
        */
        name:{
            type:String,
            default:"默认"
        },
        age:{
            type:Number,
            default: 0
        },
        height:{
            type:Number,
            default: 2
        },
        friend:{
            type: Object,
            default:()=>({name:"jimi"})
        },
        hobbies:{
            type:Array,default:()=>["1",'2','3']
        }
    },  
      data() {
        return {
          //变量定义 放置数据值，相当于默认值 相似于js中全局变量
        };
      },
      activated() {
        //动态加载钩子函数 在该函数内调用的方法会有页面跳转路由
        //会再次重新获得生命周期
      },
      created() {
        //加载钩子函数 组件创建完成没有渲染时触发 获取页面数据 未加载DOM结构
        //相当于 jQ中加载函数
      },
      watch:{
        //监听
      },
      mounted() {
        //组件渲染之后触发 页面已获取数据 并且组件已渲染
  
      },
      methods: {
  
  
      },
    };
  </script>
    <style  scoped>
    /*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
    /*主样式*/

  </style>
  <style>
    /*全局css 支持css3 可以改变elementUI组件的样式 样式调整在整个系统所有页面生效
      【警告注意: 可能会造成其他页面样式污染 需谨慎使用】 **/
  
  </style>